<template>
    <div class="categories">
        <HeaderBar title="分类"/>
        <SearchBar @search="searchInfo"/>
        <div class="content">
            <div class="left-menu">
                <div @click.prevent="onSubListSelected(item)" v-for="(item,index) in subList" class="subListItem" :class="selectSubList.Name==item.Name?'activeSubItem':''"  :key="index">{{item.Name}}</div>
            </div>
            <div class="right-content">
                <upLoadDownRefresh 
                    @refresh="refresh"
                    @load="load"
                    :maxDistance="300"
                    :triggerDistance="100"
                >
                    <div v-if="secondSubList.length>0" style="display: flex;flex-wrap:wrap;padding-top:30px" >
                        <div v-for="(item,index) in secondSubList" :key="index" class="subItem" @click.prevent="gotoDetail(item)">
                            <img :src="item.ImageUrl||item.Picture.BigUrl" alt="item.Name" class="itemImg"/>
                            <div class="itemName">{{item.Name}}</div>
                        </div>
                    </div>
                    <div v-else style="padding-top: 50px;">暂无数据</div>
                </upLoadDownRefresh>
            </div>

        </div>
    </div>
</template>
<script>

import HeaderBar from '@/components/Header.vue'
import SearchBar from '@/components/Search.vue'
import { getSubTitle,searchFindByCid } from '@/api/categories'
export default {
    components:{
        HeaderBar,
        SearchBar
    },
    data(){
        return{
            subList:[],
            secondSubList:[],
            selectSubList:null,
            selectSecondSub:null,
            hasmore:true,
            page:1,
        }
    },
    mounted(){
        getSubTitle().then(res=>{
            // //console.log(res);
            this.subList = res.Data
            if(this.subList.length>0){
                //剔除‘为您推荐'
                this.subList = this.subList.filter(item=>{
                    return item.Name != '为您推荐'
                })
                if(this.$route.query.id){
                    this.selectSubList = this.subList.find(item=>{
                        console.log(item)

                        return item.Id == this.$route.query.id
                    })
                }else{
                    this.selectSubList = this.subList[0]
                }
                this.getSubSecondTitle()
            }
           
        })
    },
    methods:{
        load(done){
            console.log("上拉加载》》》》",this.hasmore)
            if(!this.hasmore) return done();
            this.page += 1;
            this.getSubSecondTitle()

            done()
        },

        refresh(done){
            console.log("下拉刷新")
            this.page = 1;
            this.getSubSecondTitle()
            done()
        },
        gotoDetail(item){
            //console.log(item)
            if(item.Picture){
                this.$router.push({path:'/product',query:{id:item.Id}})
                //console.log("商品详情")
            }else{
                //console.log(item)
                this.$router.push({path:'/subList',query:{id:this.selectSubList.Id,selectedId:item.Id,name:this.selectSubList.Name}})
                //console.log("商品类目详情")
            }

        },
        getSubSecondTitle(){
           if(this.selectSubList){
            let secondSubList = []
            if(this.page == 1) {
                searchFindByCid({cid:this.selectSubList.Id,size: 30,mid:0,page:this.page,orderBy:0,specshow:false,tagshow:false}).then(res=>{
                //console.log(res)
                secondSubList = res.Data.Items
                getSubTitle({catId:this.selectSubList.Id}).then(res=>{
                    //console.log(res)
                    this.secondSubList = [...res.Data,...secondSubList]
                    this.hasmoremore = res.Data.length == 0?false:true
                    //console.log(this.secondSubList)
                })  
            }).catch(err=>{
                console.error(err)
                this.hasmore = false
            })
            }else{
                searchFindByCid({cid:this.selectSubList.Id,size: 15,mid:0,page:this.page,orderBy:0,specshow:false,tagshow:false}).then(res=>{
                    //console.log(res)
                    console.log('上拉加载')
                    if(res.Data.Items.length == 0) this.hasmore = false;
                    secondSubList = res.Data.Items
                    this.secondSubList = [...this.secondSubList,...secondSubList]

            })            
           }
        }
        },
        onSubListSelected(item){
            this.selectSubList = item
            this.page = 1;
            this.getSubSecondTitle()
        },
        searchInfo(info){
            //console.log("搜索内容："+info);
            this.$router.push({path:'/search',query:{searchKey:info}});
        },
    }
}
</script>
<style scoped>
.categories{
    background-color: #950000;
    height: 90%;
    width: 100vw;
    display: flex;
    flex-direction: column;
}
::v-deep #scroll-container{
    background-color: white !important;
}
.content{
    display: flex;
    width: 100%;
    flex: 1;
    height: 85%;
    background-color: white;
   
}
.left-menu{
    flex: 2;
    border-right: 1px solid #eee;
}
.right-content{
    flex: 7;
    overflow-y: scroll;
    height: 100%;
}
.subItem{
    width:100px;
    height: 120px;
    margin: 5px 10px;

}
.itemImg{
    width: 70px;
    height: 70px;
    object-fit: contain;
}
.itemName{
    font-size: 10px;
    text-align: center;
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
    white-space: nowrap; /* 禁止文本换行 */
}
.subListItem{
    height: 40px;
    line-height: 40px;
    color: #333;
    border-left: #fff 3px solid;
    border-bottom: 1px solid #eee;

}
.activeSubItem{
    background-color: #fff;
    color: #950000;
    border-left: #950000 3px solid;
}
</style>